<template>
  <div>

    <!--      商品卡片-->
    <van-card
      @click-thumb="gotoDetail(item.carId)"
      num="1"
      :price="item.rentprice"
      :desc="item.description"
      :title="item.name"
      thumb="https://img2.bitautoimg.com/autoalbum/files/20201226/191/20201226230_8398453_14.jpg"
      v-for="(item,index) in carList"
    >
      <template #tags>
        <van-tag plain type="danger">{{item.type}}</van-tag>
        <van-tag plain type="danger">{{item.color}}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click="cancleCollect(index,item.collectId)">取消收藏</van-button>
        <!--<van-button size="mini">will</van-button>-->
      </template>
    </van-card>
    <index></index>
<!--    <h2>{{mes}}</h2>-->
<!--    <van-button type="danger" v-on:click="changeit">点击</van-button>-->

<!--    <div></div>-->

<!--    <van-swipe-cell v-for="(kv,index) in lists">-->
<!--      <template slot="left">-->
<!--        <van-button square type="primary" text="选择" />-->
<!--      </template>-->
<!--      <van-cell :border="false" v-bind:title="kv[0]" v-bind:value="kv[1]" />-->
<!--      <template slot="right">-->
<!--        <van-button square type="danger" text="删除" v-on:click="delOne(index)"/>-->
<!--        <van-button square type="primary" text="收藏"/>-->
<!--      </template>-->
<!--    </van-swipe-cell>-->
  </div>
</template>

<script>
  import { SwipeCell } from 'vant';
  import { Cell } from 'vant';
  import { Button } from 'vant';
  import request from '@/utils/request'
  import Index from "./index/index";

  export default {
    name: "vantcoms",
    components: {
      Index,
      [Button.name]: Button,
      [SwipeCell.name]: SwipeCell,
      [Cell.name]: Cell
    },
    data(){
      return {
        mes: '点击按钮改变',
        flag: 1,
        lists: [
          ['张三','男'],
          ['李四','女'],
          ['王二','男'],
          ['麻子','男'],
          ['斋藤','男'],
          ['龟田','女'],
          ['斯威夫特','男'],
          ['李南','男'],
        ],
        carList:[]
      }
    },
    mounted() {
      request({
        url: '/collect/customer/carInfoList',
        method: 'get'
      }).then(res => {
        this.carList = res
      });
    },
    methods: {
      gotoDetail(id) {
        //使用query携带参数到页面详细信息页
        console.log("车辆id:" + id);
        this.$router.push({path:'/carDetailPage',query:{carId:id}});
      },
      cancleCollect(index,collectId){
        request({
          url: '/collect/customer/collect',
          method: 'delete',
          data:{
            collectId:collectId
          }
        }).then(res => {
          this.carList.splice(index,1)
        });
      },
        // position 为关闭时点击的位置
        // instance 为对应的 SwipeCell 实例
        beforeClose({ position, instance }) {
          switch (position) {
            case 'left':
            case 'cell':
            case 'outside':
              instance.close();
              break;
            case 'right':
              Dialog.confirm({
                message: '确定删除吗？'
              }).then(() => {
                instance.close();
              });
              break;
          }
        },
      changeit() {
        console.log('当前值是：' + this.flag);
        if (this.flag == 1) {
          this.mes = '我改变了';
          this.flag = 2;
          console.log(this.flag);
        } else {
          this.mes = '哈哈哈哈';
          this.flag = 1;
        }
        console.log(this.flag);
      },
      delOne(index) {
        console.log(index);
        this.lists.splice(index, 1);
      }
      }
  }
</script>

<style scoped>

</style>
